<template>
    <div class="strategy">
        <Header colors="Strategy"></Header>
        <div class="banner-image">
            <img src="../../assets/img/banner.png" alt="">
        </div>
        <div class="marketing">
            <header>
                <span></span>
                <h2>营销策略</h2>
            </header>
            <div class="content">
                <ul>
                    <li class="platform" @click="show_time('platform')">
                        <div>
                            <img src="../../assets/img/platform.png" alt="">
                        </div>
                        <h3 :class="text_color">平台承包，特色服务</h3>
                    </li>
                    <li class="whole-network" @click="show_time('whole_network')" >
                        <div>
                            <img src="../../assets/img/whole-network.png" alt="">
                        </div>
                        <h3 :class="text_color_1">全网推广，定点投放</h3>
                    </li>
                </ul>
                <div class="center-words">
                    <transition mode="out-in" name="no-mode-translate-fade">
                        <div class="words words-0" v-show="platform_show">
                            <p>通过市场推广或技术手段，短时间内获得海量高质量低成本的自然用户，使产品和品牌在搜索结果和各榜单排名获得大幅度提升</p>
                        </div>
                    </transition>
                    <transition mode="out-in" name="no-mode-translate-fade">
                        <div class="words words-1" v-show="whole_network_show">
                            <p>搜索引擎、资源合作、网络广告、新媒体、活动等全方位推广，根据产品不同阶段进行定期推送，以获得投放效果最大化</p>
                        </div>
                    </transition>
                    <transition mode="out-in" name="no-mode-translate-fade">
                        <div class="words words-2" v-show="resource_show">
                            <p>汇聚30余家主流市场，3000多家媒体资源，积累全线渠道媒体投放效果数据，挑选最合适的推广资源</p>
                        </div>
                    </transition>
                    <transition mode="out-in" name="no-mode-translate-fade">
                        <div class="words words-3" v-show="data_show">
                            <p>监测各渠道推广效果，根据大数据统计分析结果，优化下一阶段推广策略</p>
                        </div>
                    </transition>
                </div>
                <ul class="two-ul">
                    <li class="resource"  @click="show_time('resource')">
                        <div>
                            <img src="../../assets/img/resource.png" alt="">
                        </div>
                        <h3 :class="text_color_2">优质资源，精准匹配</h3>
                    </li>
                    <li class="data" @click="show_time('data')">
                        <div>
                            <img src="../../assets/img/data.png" alt="">
                        </div>
                        <h3 :class="text_color_3">数据监测，定时评估</h3>
                    </li>
                </ul>
            </div>
        </div>
        <div class="marketing-advantage">
            <header>
                <span></span>
                <h2>营销优势</h2>
            </header>
            <div class="content">
                <div class="service">
                    <div>
                        <p class="num">.1.</p>
                    </div>
                    <div> <p class="emphasize">一站式渠道服务</p></div>
                    <div><p class="words">全面的推广营销方案，省时省心</p></div>
                </div>
                <div class="settlement">
                    <div><p class="num">.2.</p></div>
                    <div><p class="emphasize">根据效果结算</p></div>
                    <div><p class="words">监测各渠道推广效果，拒绝无效成本</p></div>
                </div>
                <div class="big-data">
                    <div> <p class="num">.3.</p></div>
                    <div><p class="emphasize">大数据营销</p></div>
                    <div><p class="words">多维度分析产品与资源特性，实现客户、资源、用户最佳</p></div>
                </div>
                <div class="custom">
                    <div><p class="num">.4.</p></div>
                    <div><p class="emphasize">定制化服务</p></div>
                    <div><p class="words">为产品分析目标人群，分阶段定制推广计划</p></div>
                </div>
                <div class="efficient">
                    <div><p class="num">.5.</p></div>
                    <div><p class="emphasize">高效执行</p></div>
                    <div> <p class="words">完美计划遇上高效执行，提升推广效果</p></div>
                </div>
            </div>
        </div>
        <Footer/>
    </div>
</template>
<script>
import Header from '../common/components/Header'
import Footer from '../common/components/Footer'
export default {
    name: 'Strategy',
    data () {
        return {
            platform_show: true,
            whole_network_show: false,
            resource_show: false,
            data_show: false,
            num: 0,
            strategy_setinterval_id: null
        }
    },
    components: {
        Header,
        Footer
    },
    methods: {
        show_time (s) {
            if(s == 'platform') {
                this.platform_show = true
                this.whole_network_show = false
                this.resource_show = false
                this.data_show = false
                this.num = 1
            }
            else if (s == 'whole_network') {
                this.whole_network_show = true
                this.platform_show = false
                this.resource_show = false
                this.data_show = false
                this.num = 2
            }
            else if (s == 'resource') {
                this.resource_show = true
                this.platform_show = false
                this.whole_network_show = false
                this.data_show = false
                this.num = 3
            }
            else if (s == 'data') {
                this.data_show = true
                this.resource_show = false
                this.platform_show = false
                this.whole_network_show = false
                this.num = 0
            }
        },
        show_time_1 () {
            if (this.num == 0) {
                this.platform_show = true
                this.whole_network_show = false
                this.resource_show = false
                this.data_show = false
                this.num++
            }
            else if (this.num == 1) {
                this.whole_network_show = true
                this.platform_show = false
                this.resource_show = false
                this.data_show = false
                this.num++
            }
            else if (this.num == 2) {
                this.resource_show = true
                this.platform_show = false
                this.whole_network_show = false
                this.data_show = false
                this.num++
            }
            else if (this.num == 3) {
                this.data_show = true
                this.resource_show = false
                this.platform_show = false
                this.whole_network_show = false
                this.num = 0
            }
        }
    },
    computed: {
        text_color () {
            if(this.platform_show == true) {
                return {
                    active: true
                }
            }
        },
        text_color_1 () {
            if(this.whole_network_show == true) {
                return {
                    active: true
                }
            }
        },
        text_color_2 () {
            if(this.resource_show == true) {
                return {
                    active: true
                }
            }
        },
        text_color_3 () {
            if(this.data_show == true) {
                return {
                    active: true
                }
            }
        },
    },
    mounted () {
        this.show_time_1()
        this.strategy_setinterval_id = setInterval(this.show_time_1, 8000)
    },
    beforeDestroy () {
        clearInterval(this.strategy_setinterval_id)
    }
}
</script>
<style scoped>
.strategy {
    width: 100%;
}
.strategy .banner-image {
    height: 300px;
}
.strategy .banner-image img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}
.strategy .marketing {
    margin-top: 100px;
    height: 866px;
}
.strategy .marketing header {
    text-align: center;
}
.strategy .marketing header span {
    display: inline-block;
    width: 55px;
    height: 39px;
    background: url("../../assets/img/down.png") no-repeat;
    background-size: cover;
}
.strategy .marketing header h2 {
    font-size: 48px; /*px*/
    color: #1e90ff;
    margin-top:20px;
}
.strategy .marketing .content {
    margin: 0 auto;
    margin-top: 80px;
    width: 670px;
}
.strategy .marketing .content ul {
    height: 209px;
}
.strategy .marketing .content ul li {
    text-align: center;
}
.strategy .marketing .content ul .platform {
    float: left;
}
.strategy .marketing .content ul .whole-network {
    float: right;
}
.strategy .marketing .content ul li div {
    width: 156px;
    height: 156px;
    display: inline-block;
}
.strategy .marketing .content ul li div img {
    width: 100%;
    height: auto;
}
.strategy .marketing .content ul li h3 {
    color: #05173b;
    font-size: 30px; /*px*/
    margin-top: 20px;
}
.strategy .marketing .content ul li .active {
     color: #1e90ff;
}
.strategy .marketing .center-words {
    width: 670px;
    height: 199px;
    position: relative;
    margin-top: 20px;
}
.strategy .marketing .content .words {
    background: url("../../assets/img/background-color.png") no-repeat;
    background-size: 688px 198px;
    width: 100%;
    height: 199px;
    display: flex;
    justify-content: center;
    align-content: center;
    position: absolute;
}
.strategy .marketing .content .words-1 {
    background: url("../../assets/img/upper-right.png") no-repeat;
    background-size: 688px 199px;
}
.strategy .marketing .content .words-2 {
    background: url("../../assets/img/bottom-left.png") no-repeat;
    background-size: 688px 199px;
}
.strategy .marketing .content .words-3 {
    background: url("../../assets/img/right-down.png") no-repeat;
    background-size: 688px 199px;
}
.strategy .marketing .content .words p {
    font-size: 26px; /*px*/
    color: #fff;
    padding-top: 70px;
    padding-left: 10px;
    box-sizing: border-box;
    line-height: 40px;
}
.strategy .marketing .content .words-2 p,.strategy .marketing .content .words-3 p {
    padding-top: 45px;
}
/* .no-mode-translate-fade-enter-active {
  transition: all 1s;
}
.no-mode-translate-fade-enter, .no-mode-translate-fade-leave-active {
  opacity: 0;
}
.no-mode-translate-fade-enter {
  transform: translateX(261px);
} */
.strategy .marketing .content .two-ul {
    margin-top: 20px;
}
.strategy .marketing .content .two-ul .resource {
    float: left;
}
.strategy .marketing .content .two-ul .data {
    float: right;
}
.strategy .marketing-advantage {
    margin-top: 150px;
}
.strategy .marketing-advantage header {
    text-align: center;
}
.strategy .marketing-advantage header span {
    width: 55px;
    height: 39px;
    display: inline-block;
    background: url("../../assets/img/down.png") no-repeat;
    background-size: 55px 39px;
}
.strategy .marketing-advantage header h2 {
    font-size: 48px; /*px*/
    color: #1e90ff;
    margin-top:20px;
}
.strategy .marketing-advantage .content {
    margin-top: 80px;
}
.strategy .marketing-advantage .content .service,.strategy .marketing-advantage .content .settlement,.strategy .marketing-advantage .content .big-data,.strategy .marketing-advantage .content .custom,.strategy .marketing-advantage .content .efficient {
    text-align: center;
}
.strategy .marketing-advantage .content .service div .num,.strategy .marketing-advantage .content .settlement div .num,.strategy .marketing-advantage .content .big-data div .num,.strategy .marketing-advantage .content .custom div .num,.strategy .marketing-advantage .content .efficient div .num {
    color: #2091ff;
    font-size: 36px; /*px*/
    display: inline-block;
}
.strategy .marketing-advantage .content .service div .emphasize,.strategy .marketing-advantage .content .settlement div .emphasize,.strategy .marketing-advantage .content .big-data div .emphasize,.strategy .marketing-advantage .content .custom div .emphasize,.strategy .marketing-advantage .content .efficient div .emphasize {
    font-style: normal;
    font-size: 36px; /*px*/
    color: #05173b;
    margin-top: 14px;
    display: inline-block;
}
.strategy .marketing-advantage .content .service div .words,.strategy .marketing-advantage .content .settlement div .words,.strategy .marketing-advantage .content .big-data div .words,.strategy .marketing-advantage .content .custom div .words,.strategy .marketing-advantage .content .efficient div .words {
    font-size: 26px; /*px*/
    color: #708090;
    margin-top: 10px;
    display: inline-block;
}
.strategy .marketing-advantage .content .settlement,.strategy .marketing-advantage .content .big-data,.strategy .marketing-advantage .content .custom,.strategy .marketing-advantage .content .efficient {
    margin-top: 40px;
}
@media screen and (max-width: 1242px) and (min-width: 1233px){
.strategy .marketing .content .words-1 p {
    padding-top: 90px;
}
.strategy .marketing .content .words-0 p {
    padding-top: 90px;
}   
}
</style>
